import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import Progress from "components/Progress";

<Meta title="Components/Progress" component={Progress} />

# Progress

Commonly used to display the length of a process.

## Props

<Props of={Progress} />

## Examples

### Basic

Basic usages for ``Progress`` component.

<Preview>
  <Story name="basic progress">
    <div>
      <Progress percent={30} status="primary" />
      <br/>
      <Progress percent={40} status="warning" />
      <br/>
      <Progress percent={50} status="danger" />
      <br/>
    </div>
  </Story>
</Preview>

### Auto Status

Status auto change by percent.

<Preview>
  <Story name="progress auto status">
    <div>
      <Progress percent={30} />
      <br/>
      <Progress percent={80} />
      <br/>
      <Progress percent={95} />
      <br/>
    </div>
  </Story>
</Preview>
